import React, {Component} from "react";
import cookie from "react-cookie";
import {login} from "../utils/native_app";

const CLASS_NAME_DISABLE = "shopping-cart-bottom-button-disabled";
const CLASS_NAME_USABLE = "shopping-cart-bottom-button";
class ShoppingCartBottom extends Component {

    constructor(props) {
        super(props);
        this.state = {
            is_checked: props.selectedAll,
            totalPrice: props.totalPrice,
            buttonType: props.buttonType,
            canClick: props.canClick,
            classNameDisable: props.canClick ? CLASS_NAME_USABLE : CLASS_NAME_DISABLE
        };
    }

    componentWillUpdate(nextProps) {

        if (nextProps.totalPrice != this.state.totalPrice) {
            this.setState({
                totalPrice: nextProps.totalPrice,
                is_checked: nextProps.selectedAll,
                canClick: nextProps.canClick,
                classNameDisable: nextProps.canClick ? CLASS_NAME_USABLE : CLASS_NAME_DISABLE
            })
        }

    }

    render() {
        return (
            <div>
                <div className="shopping-cart-bottom">
                    <hr/>
                    <div className="shopping-cart-goods-checkbox-all">
                        <input type="checkbox" value="1" id="checkboxFourInput" checked={this.state.is_checked}/>
                        <label for="checkboxFourInput" onClick={this._updateCheckbox.bind(this)}></label>
                    </div>
                    <label className="shopping-cart-bottom-checked-all" htmlFor="checkedAll">全选</label>
                    <button className={this.state.classNameDisable}
                            onClick={this._rightButtonClick.bind(this)} disabled={!this.state.canClick}>
                        {this.state.buttonType == "1" ? " 下单 " : "删除所选"}
                    </button>
                    <label className="shopping-cart-bottom-total-amount"
                           htmlFor="checkedAll">{"¥" + this.state.totalPrice}</label>

                </div>
                <hr className="shopping-cart-bottom-line"/>
            </div>
        )
    }

    _updateCheckbox() {
        console.log("_checkedAll1111" + this.state.is_checked);
        this.checkedAll();
        this.setState({
            is_checked: !this.state.is_checked
        });
    }

    checkedAll() {
        console.log("_checkedAll");
        let shoppingCarItemList = cookie.load("shoppingCarItemList") || [];
        shoppingCarItemList.map((item) => {
            console.log("_checkedAll-->isChecked:" + item.isChecked);
            item.isChecked = this.state.is_checked;
        });
        cookie.save("shoppingCarItemList", shoppingCarItemList);
        this.props.handleLoad();
    }

    _rightButtonClick() {
        this.state.buttonType == "1" ? this.goToPay() : this.deleteAllChecked();
    }

    deleteAllChecked() {
        if(!this.showConfirm()) return;
        console.log("_deleteAllChecked");
        let shoppingCarItemList = cookie.load("shoppingCarItemList") || [];
        let newShoppingCartItemList = [];
        shoppingCarItemList.map((item) => {
            console.log("_checkedAll-->isChecked:" + item.isChecked);
            if (!item.isChecked) {
                newShoppingCartItemList.push(item);
            }
        });
        cookie.save("shoppingCarItemList", newShoppingCartItemList);
        this.props.handleLoad();
    }

    goToPay() {
        login("/#/mall/orderConfirm");
    }

    showConfirm() {
        var r = confirm("要删除所选商品？");
        return r;
    }


}

export default ShoppingCartBottom